<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用电信息回溯</title>
    <script src="../../static/js/echarts.min.js"></script>
    <script src="../../static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="../../static/css/reset.css">
    <link rel="stylesheet" href="../../static/css/common.css">
    <link rel="stylesheet" href="../../static/css/chart.css">

</head>

<body>
    <div class="box">
        <header class="header">
            <h1>异常用电行为查询系统</h1>
        </header>
        <section class="chart-content">
            <h2>用电信息回溯</h2>
            <div class="dianya"></div>
            <div class="dianliu"></div>
        </section>
    </div>
    
    <script>
        // 3.初始化echarts实例对象
        var myChart = echarts.init(document.querySelector(".dianya"));
        var myChart2 = echarts.init(document.querySelector(".dianliu"));
        // 4.指定配置项和数据
        var option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['A相', 'B相', 'C相']
    },
    dataZoom: [
        {
            startValue: '1:00',
            endValue: '8:00'
        }, 
        {
            type: 'inside'
        }
    ],
        
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        name: '时间',
        type: 'category',
        boundaryGap: false,
        data: [
            '0:00','1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00',
            '8:00','9:00', '10:00', '11:00', '12:00', '13:00', '14:00','15:00',
            '16:00','17:00', '18:00', '19:00', '20:00','21:00', '22:00', '23:00',
        ]
    },
    yAxis: {
        name: '电压',
        type: 'value',
        min:230,
        max:240
    },
    series: [
        {
            name: 'A相',
            type: 'line',
            data: [
                237.2, 236.1,236.8,237.3,237.1,237.5,237.7,236,
                234.9,233.6,234.8,236.1,236.9,237.6,235.3,235.5,
                233.9,234.4,236.3,236.1,237.2,236.7,238.2,236.9
            ]
        },
        {
            name: 'B相',
            type: 'line',
            data: [
                236.6,235.4,235.7,236.7,236.6,236.9,236.9,235.6,
                234.7,233.5,234.2,235.7,236.5,237.2,235,234.9,
                234.4,234,236.2,235.3,236.2,236.1,237.7,236
            ]
        },
        {
            name: 'C相',
            type: 'line',
            data: [
                236.9,235.4,236.3,236.9,236.8,237.1,236.7,235.6,
                234.6,233.7,234.5,235.8,236.7,236.9,235.2,235.2,
                234.1,234,236.5,235.9,236.7,236.4,238.1,236.4
            ]
        },
    ]
        };

        // 电流
        var option2 = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['A相', 'B相', 'C相']
    },
    dataZoom: [
        {
            startValue: '1:00',
            endValue: '8:00'
        }, 
        {
            type: 'inside'
        }
    ],
        
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        name: '时间',
        type: 'category',
        boundaryGap: false,
        data: [
            '0:00','1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00',
            '8:00','9:00', '10:00', '11:00', '12:00', '13:00', '14:00','15:00',
            '16:00','17:00', '18:00', '19:00', '20:00','21:00', '22:00', '23:00',
        ]
    },
    yAxis: {
        name: '电流',
        type: 'value',
        min:0.5,
        max:1.6
    },
    series: [
        {
            name: 'A相',
            type: 'line',
            data: [
                0.758, 0.946, 0.677, 0.772, 0.715, 0.746, 0.932, 1.425,
                1.411, 1.572, 1.132, 0.781, 1.462, 1.244, 1.237, 0.675,
                1.026, 1.102, 1.205, 1.315, 1.211, 1.323, 0.866, 0.63
            ]
        },
        {
            name: 'B相',
            type: 'line',
            data: [
                0.744, 0.915, 0.661, 0.758, 0.706, 0.748, 0.907, 1.412,
                1.403, 1.585, 1.113, 0.776, 1.453, 1.223, 1.23, 0.667,
                1.045, 1.093, 1.228, 1.301, 1.178, 1.298, 0.864, 0.616
            ]
        },
        {
            name: 'C相',
            type: 'line',
            data: [
                0.765, 0.932, 0.691, 0.768, 0.713, 0.746, 0.893, 1.435,
                1.41, 1.588, 1.134, 0.777, 1.465, 1.216, 1.229, 0.678,
                1.029, 1.098, 1.233, 1.341, 1.214, 1.316, 0.873, 0.619
            ]
        },
    ]
        };
        // 5.将配置项设置给echarts实例对象
        myChart.setOption(option);
        myChart2.setOption(option2);
    </script>
</body>

</html>